<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>登录</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<link rel="stylesheet" href="css/mui.min.css"/>
<link rel="stylesheet" href="css/style.css"/><!--自定义样式-->
<script type="text/javascript" src="js/mui.min.js"></script>
<script type="text/javascript" src="js/config.js"></script><!--自定义脚本-->
<script type="text/javascript" src="js/common.js"></script><!--自定义脚本-->
</head>
<body>
<div class="mui-content">
    <div class="dry-login-box">
        <div>
            <div class="dry-login-icon-box"><span class="mui-icon mui-icon-phone"></span></div>
            <div class="dry-login-input-box"><input type="text" class="mui-input" maxlength="11" id="phone" placeholder="请输入手机号"/></div>
        </div>
        <div class="dry-comment-split"></div>
        <div style="margin-top:10px;">
            <div class="dry-login-icon-box"><span class="mui-icon mui-icon-locked"></span></div>
            <div class="dry-login-input-box" style="position:relative;">
                <input type="text" class="mui-input" maxlength="6" id="code" placeholder="请输入验证码"/>
                <div style="position:absolute;right:0;top:3.5px;">
                    <button type="button" class="mui-btn mui-btn-success" id="getCodeButton">获取短信验证码</button>
                    <button type="button" class="mui-btn mui-btn-success dn" id="regetCodeButton"><span id="countDown">60</span>秒后重新获取</button>
                </div>
            </div>
        </div>
    </div>
    <div class="mui-content-padded">
        <p class="dry-text-center">登录即表示同意&nbsp;<a href="javascript:void(0);" id="userProtocol">用户协议</a></p>
        <button type="button" class="mui-btn mui-btn-primary mui-btn-block" id="login">登录</button>
    </div>
</div>
<script type="text/javascript">
mui.init();
autoOpenUrl('userProtocol', 'user_protocol.html', '用户协议');

var getCodeButtonLock = 0;
var loginLock = 0;

$$("getCodeButton").addEventListener('tap', function(){
    if(getCodeButtonLock){
        return false;
    }
    getCodeButtonLock = 1;
    window.setTimeout(function(){
        getCodeButtonLock = 0;
    }, 1000);
    var phone = $$("phone").value;
    if(!isPhone(phone)){
        mui.toast('手机号不正确');
        return false;
    }
    var data = new FormData();
    data.append("phone", phone);
    requestUrl('post', apiMessageCodeSendUrl, function(){
        mui.toast('验证码已经发送，请注意查收');
    }, data);
    $$("getCodeButton").classList.add("dn");
    $$("regetCodeButton").classList.remove("dn");
    var theId = window.setInterval(function(){
        var i = $$("countDown").innerHTML;
        i--;
        if(i <= 0){
            $$("countDown").innerHTML = 60;
            window.clearInterval(theId);
            $$("getCodeButton").classList.remove("dn");
            $$("regetCodeButton").classList.add("dn");
        }
        else{
            $$("countDown").innerHTML = i;
        }
    }, 1000);
});

$$("login").addEventListener('tap', function(){
    if(loginLock){
        return false;
    }
    loginLock = 1;
    window.setTimeout(function(){
        loginLock = 0;
    }, 1000);
    var phone = $$("phone").value;
    var code = $$("code").value;
    if(!isPhone(phone)){
        mui.toast('手机号不正确');
        return false;
    }
    if(!isMessageCode(code)){
        mui.toast('短信验证码不正确');
        return false;
    }
    var data = new FormData();
    data.append("phone", phone);
    data.append("code", code);
    requestUrl('post', apiUserloginByPhoneAndCodeUrl, loginByPhoneAndCodeSuccess, data);
});

function loginByPhoneAndCodeSuccess(json){
    if(json.code != 0){
        mui.toast(json.msg);
    }
    else{
        console.log(json);
        plus.storage.setItem("token", json.data.token);
    }
}
</script>
<script type="text/javascript" charset="utf-8" src="../mui_bak_20181005/js/vconsole.min.js"></script>
<script type="text/javascript" charset="utf-8">
var vConsole = new VConsole();
</script>
</body>
</html>
